<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>步步街Fixed布局L模式演示</title>
<link rel="stylesheet" href="../fixed_L.css" />
<style type="text/css">
h1{ line-height:2em;margin:0; }
@media (max-width: 768px) {
	.wrapping { width:760px; }
	.mn .ming{width:560px;}
	.nm .ming{width:560px;}
	.mnn .n2 { width:auto;float:none; margin-left:0; right:0; clear:both; }
	.nmn .n2 { width:auto;float:none; margin-left:0; right:0; clear:both; }
	.nnm .n2 { width:auto;float:none; margin-right:0; left:0; clear:both; }
}

@media (max-width: 480px) {
	.wrapping{ width:100%; }
	.mn .ming, .mn .n1, .mn .n2,
	.nm .ming, .nm .n1, .nm .n2,
	.mnn .ming, .mnn .n1, .mnn .n2,
	.nmn .ming, .nmn .n1, .nmn .n2,
	.nnm .ming, .nnm .n1, .nnm .n2 {
		width:auto; float:none; margin:0; left:0; right:0; clear:both;
	}
	.wrapping .w-1, .wrapping .w-1-2, .wrapping .w-1-3, .wrapping .w-2-3, .wrapping .w-1-4, .wrapping .w-3-4,
	.wrapping .w-1-5, .wrapping .w-2-5, .wrapping .w-3-5, .wrapping .w-4-5,
	.wrapping .w-1-6, .wrapping .w-5-6, .wrapping .w-1-8, .wrapping .w-3-8, .wrapping .w-5-8, .wrapping .w-7-8,
	.wrapping .w-1-12, .wrapping .w-5-12, .wrapping .w-7-12, .wrapping .w-11-12,
	.wrapping .w-1-24, .wrapping .w-5-24, .wrapping .w-7-24, .wrapping .w-11-24, .wrapping .w-13-24, .wrapping .w-17-24, .wrapping .w-19-24, .wrapping .w-23-24 {
		width:auto; float:none;
	}
}

body{font-size:14px;line-height:20px;}
div.content {
	display:block;
	border:1px solid #666666;
	overflow:hidden;
	text-align:center;
	background:#F1F1F1;
	font-weight: bold;
	background:#F9F9F4 url(../img/grid_text.png) 1px 0 repeat;
	margin-right:0px;
}
.wrapping {
	padding:3px 0;
}
.nmn .ming{color:red;}
address *{vertical-align:middle;font-family:Dotum;}
</style>
</head>
<body>
<div class="wrapping m">
  <h1>步步街Fixed布局L模式演示</h1>
</div>
<hr />
<div class="wrapping m">
  <div class="ming"><div class="content">m-default</div></div>
</div>
<hr />
<div class="wrapping mn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n-default</div></div>
</div>
<hr />
<div class="wrapping nm">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n-default</div></div>
</div>
<hr />
<div class="wrapping mnn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<hr />
<div class="wrapping nmn">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<hr />
<div class="wrapping nnm">
  <div class="ming"><div class="content">m-default</div></div>
  <div class="n1"><div class="content">n1-default</div></div>
  <div class="n2"><div class="content">n2-default</div></div>
</div>
<hr />
<div class="wrapping">
  <div id="colophon">
    <address style="text-align:center;">
      <img src="../img/logo_16px.gif" alt="" />&nbsp;<em>Copyright ©</em> <span><a href="http://www.bubujie.net/" target="_blank">步步街工作室</a> 2008-2012 All Rights Reserved.</span>
    </address>
  </div>
</div>
</body>
</html>
